<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '猜书'
	}
}
</route>
<template>
	<view class="page">
		    <uni-icons @tap='goblack' type="left" size="30" class="blackIcon" :color="iconColor"></uni-icons>
	<!-- 	<view class="viewBox"> -->
	        <view class="inner">
				<image src="https://breadbook-new1.oss-cn-hangzhou.aliyuncs.com/static/booksBtn.jpg" mode="" class="imgPage"></image>
				<image src="../../static/bookBtn.png" :class="{passDown:pass}" mode="" class="goBtn" @touchstart="touchstart" @touchend="onTouchEnd"></image>
			</view>
			
	<!-- 	</view> -->
		<!-- <image src="../../static/bookBtn.png" mode="" class="goBtn"></image> -->
		 <!-- <view class="dialog" v-if="showDialog"> -->
		<view class="mark" @tap="closeDialog" v-show="showDialog"></view>
		

		 <view class="view" :class="{show:showDialog}">
			 <view class="content">
				 <view class="t-title">
					 《{{book_data.book_name}}》
				 </view>
				 <view class="goodimg">
					 <view class="bookCover" :style="{ backgroundImage: `url(${book_data.book_cover_img})`}">
				<!-- 		 {{book_data}} -->
				<!-- {{colors[book_data.book_defficulty]}} -->
					 </view>
					 <view class="diff">
						 <view class="diffBox" :style="{background:`${colors[book_data.book_defficulty]}`}">
						   <text> 难度：</text> 
						   <image src="../../static/star.png" mode="" v-for="(item,index) in book_data.book_defficulty" :key='index' class="starImg"></image>
						 </view>
					 </view>
				 </view>
			 </view>
			 <view class='goBookBtn' @tap="goBookDetail">
				 <image src="../../static/start.png" mode="" class="imgBtn"></image>
			 </view>
			<image src="../../static/dialog.png" mode="" class="d-img"></image>
		 </view>
	</view>
</template>

<script lang="ts" setup>
	import { randomBook } from '@/service/book';
	let pass = ref(false);
	let pass2 = ref(false);
	let showDialog = ref(false);
	let book_data = ref({
		book_cover_img:'',
		book_defficulty:1,
		book_id:'',
		book_name:''
	});
	const iconColor = '#ffffff'
	const colors = ["#a7de5f","#a7de5f","#fcc531","#ff8711"]
	onShow(() => {
	    showDialog.value = false;
	});
	
	const gorandomBook = async () => {
		uni.showLoading({ title: '找书中...' });
		const res = await randomBook();
		uni.hideLoading();
		if(res) {
			book_data.value = res.data;
			console.log(book_data)
			showDialog.value = true;
		}
	};
	
    const goblack = () => {
		uni.reLaunch({
			url:'/pages/index/index'
		});
	}
	
	const goBookDetail = () => {
	   uni.navigateTo({
           url:'/pages-book/details/index?id=' + book_data.value.book_id
	   })
	}
	
	const touchstart = () => {
		pass.value = true;
	};
	const onTouchEnd = () => {
		pass.value = false;
		
		gorandomBook();
	}
	const closeDialog = () => {
		showDialog.value = false;
	}
</script>

<style lang="scss">
	
	.default-layout {
	   
	}
	.page {
		width: 100vw;
		height: 100vh;
		background-color: #2aa7f0;
		// background-image: url('https://breadbook-new1.oss-cn-hangzhou.aliyuncs.com/static/boosBtn.jpg');
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		text-align: center;
		display: flex;
		align-items: center;
		// padding-top: 1344rpx;
		box-sizing: border-box;
		position: relative;
		.blackIcon {
			position: absolute;
			top:100rpx;
			left:30rpx;
			z-index: 99999;
		}
		.inner {
			width: 750rpx;
			height: 1352rpx;
			position: relative;
			.goBtn {
				position: absolute;
				left: 236rpx;
				top: 1210rpx;
				width: 267rpx;
			    height: 85rpx;
				transition: transform 0.01s;
				&.passDown {
					transform: scale(1.1);
				}
			}
			.imgPage {
				width: 100%;
				height: 100%;
			}
		}	
	}
	
	
	.mark {
		position: fixed;
		left:0;
		right: 0;
		top:0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.6);
		z-index: 9;
	}
	
	.view {
		// width: 0;
		// height: 0;
		transform: scale(0);
		opacity: 0;
		width: 460rpx;
		height: 711rpx;
		position: fixed;
		left: 50%;
		margin-left: -230rpx;
		margin-top: -355.5rpx;
		top:50%;
		z-index: 10;
		// opacity: 0;
		transition: all 0.3s;
		.content {
			 position: absolute;
			 left: 48rpx;
			 top: 243rpx;
			 width: 364rpx;
			 height: 341rpx;
			.t-title {
				height: 60rpx;
			}
			.bookCover {
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				height: 205rpx;
				margin-bottom: 15rpx;
			}
			.diff {
				padding: 10rpx 18rpx;
				.diffBox {
					    text-align: center;
					    // background-color: red;
					    color: #fff;
					    /* padding: 8rpx 30rpx; */
					    display: flex;
					    border-radius: 32rpx;
					    height: 56rpx;
					    font-size: 30rpx;
					    align-items: center;
					    justify-content: center;
					    width: 303rpx;
						margin: 0 auto;
					.starImg {
						width: 45rpx;
						height: 45rpx;
						margin-left: 10rpx;
					}
				}
			}
			
		}
		.goBookBtn {
			    position: absolute;
			    bottom: 11rpx;
			    left: 116rpx;
			    height: 80rpx;
			    width: 232rpx;
			.imgBtn {
				width: 100%;
				height: 100%;
			}
		}
		&.show {
			// width: 460rpx;
			// height: 711rpx;
			transform: scale(1);
			opacity: 1;
		}
		.d-img {
			width: 100%;
			height: 100%;
		}
		
		// background-image: url('https://breadbook-new1.oss-cn-hangzhou.aliyuncs.com/static/dialog.png');
		// background-repeat: no-repeat;
		// background-size: contain;
		// background-color: transparent;
	}
</style>